<template>
	<view class="outer">
		<view class="header">
			<image src="/static/creditbg.png" class="img"></image>
			<view class="box">
				<view class="t">我的余额 (元)</view>
				<view class="c">
					<view class="balance">{{credit}}</view>
					<view @click="onLog" class="_btn">资金明细</view>
				</view>
			</view>
		</view>
		<view class="recharge">
			<view class="head">充值金额</view>
			<view class="box" style="display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20rpx;">
				<view class="item" :class="{ selected : rechargeIndex == index }" @click="rechargeIndex = index" v-for="(item,index) in items" :key="index">
					<view class="_btn">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="tips">
			<view class="head">充值提示</view>
			<view class="box">
				充值金额不能退款
			</view>
		</view>
		<view class="wallet_btn">
			<view class="_btn" @click="onPay">立即支付</view>
		</view>
		<view class='backbtn' @click="onBack">返回</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				credit:'*',
				items:[],
				rechargeIndex:0,
			}
		},
		onLoad() {
			var t = this;
			this.util.post('agent/recharge', {op:'index'}, (r) => {
				t.credit = r.credit;
				t.items = r.items;
			});
		},
		methods: {
			onBack(){
				uni.navigateBack()
			},
			onLog(){
				uni.navigateTo({
					url:'/pages/agent/log'
				})
			},
			onPay(){
				var t = this;
				this.util.post('agent/recharge', {index:this.rechargeIndex}, (res) => {
					if (res.code == 1) {
						if (typeof WeixinJSBridge == 'undefined'){
						   if( document.addEventListener ){
							   document.addEventListener('WeixinJSBridgeReady', function(){onBridgeReady();}, false);
						   }else if (document.attachEvent){
							   document.attachEvent('WeixinJSBridgeReady', function(){onBridgeReady();});
							   document.attachEvent('onWeixinJSBridgeReady', function(){onBridgeReady();});
						   }
						}else{
						   onBridgeReady();
						}
						function onBridgeReady(){
							WeixinJSBridge.invoke(
							  'getBrandWCPayRequest', {
								 'appId':res.data.appid,
								 'timeStamp':res.data.timeStamp,
								 'nonceStr':res.data.nonceStr,
								 'package':res.data.package,
								 'signType':res.data.signType,
								 'paySign':res.data.paySign
							  },
							  function(r){
								  if(r.err_msg == 'get_brand_wcpay_request:ok' ){
									 uni.showToast({
										 title: '充值成功'
									 });
									 uni.redirectTo({
									 	url:'/pages/agent/index'
									 })
								  }else alert('支付失败');
							  }
						   );
						}
					} else {
						uni.showModal({
							title: '下单失败',
							content: res.msg,
							showCancel: false
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.outer{
		.wallet_btn{
			width: 100%;
			height: auto;
			overflow: hidden;
			display: -webkit-box;
			position: fixed;
			z-index: 100;
			bottom: 0;
			left: 0;
			z-index: 1;
			._btn{
				-webkit-box-flex: 1;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #2A89F8;
				border-radius: 50rpx;
				color: #fff;
				font-size: 28rpx;
				margin: 30rpx;
			}
		}
		.tips{
			.box{
				width: 100%;
				height: auto;
				overflow: hidden;
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #999;
				white-space: pre-line;
			}
			.head{
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 30rpx;
			}
			width: 100%;
			height: auto;
			overflow: hidden;
			margin-top: 30rpx;
		}
		.recharge{
			.box{
			    .item{
				    width: 100%;
				    display: inline-block;
				    margin-top: 25rpx;
					._btn{
						border: 1px solid #EAEAEA;
						padding: 0;
						text-align: center;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 16rpx;
						font-size: 28rpx;
					}
				}
				.selected{
					._btn{
						background: rgba(42,137,248,0.1);
						border: 1px solid #2A89F8;
						color: #2A89F8;
					}
				}
			}
			.head{
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
			}
			width: 100%;
			height: auto;
			overflow: hidden;
			margin-top: 30rpx;
		}
		.header{
			width: 100%;
			height: auto;
			overflow: hidden;
			position: relative;
			z-index: 10;
			.box{
				width: 90%;
				height: auto;
				overflow: hidden;
				position: absolute;
				z-index: 20;
				top: 25%;
				left: 5%;
				color: #fff;
				.c{
					width: 100%;
					height: auto;
					overflow: hidden;
					display: -webkit-box;
					margin-top: 25rpx;
					.balance{
						height: 64rpx;
						line-height: 64rpx;
						font-size: 56rpx;
						font-weight: bold;
						width: 100%;
						-webkit-box-flex: 1;
					}
					._btn{
						height: 60rpx;
						line-height: 60rpx;
						width: 160rpx;
						border: 1px solid #fff;
						border-radius: 35rpx;
						font-size: 24rpx;
						text-align: center;
					}
				}
				.t{
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
				}
			}
			.img{
				width: 100%;
				height: 240rpx;
				overflow: hidden;
				display: block;
			}
		}
		padding: 25rpx;
		height: auto;
		overflow: hidden;
	}
</style>
